<template>
        <div class="sign-canvas" ref="putImageData" @touchmove.prevent>
            <div class="head" style="display: flex;
  justify-content:space-around;
  flex-wrap:wrap;">
                   <div class="head_left" style="display:flex;align-items:center;margin-right:100px;" @click="$router.go(-1)">
                     <img src="../../assets/image/返回白@2x.png" alt="">
                     <span class="sapn1" style="color:#000;color:#fff;font-size:15px;float: left;color: #fff;">返回</span>
                   </div>
                   <div class="head_right" style="font-size:15px;">签字</div>
            <div class="div cs" style="margin-left:140px;margin-top: 10px;" >
                    <span class="sapn1" style="color:#333;font-size:15px;float: left;margin-left:-30px;color:#fff;"></span>
            </div>
            </div>
            <div class="as">
              <canvas id="canvas" width="335" height="250">
                抱歉，您的浏览器暂不支持canvas元素
              </canvas>
            </div>

            <img src="" alt="" id="img">
<!--                <div class="save" v-on:click="save">-->
<!--                    确定-->
<!--                </div>-->
          <div class="save" >
            <button v-on:click="clear">清除</button>
            <button v-on:click="save" class="backBlue">确定</button>
          </div>

        </div>
    </template>
<script>

var draw
var preHandler = function (e) { e.preventDefault() }
class Draw {
  constructor (el) {
    this.el = el
    this.canvas = document.getElementById(this.el)
    this.cxt = this.canvas.getContext('2d')
    this.stage_info = canvas.getBoundingClientRect()
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    }
  }
  init (btn) {
    var that = this

    this.canvas.addEventListener('touchstart', function (event) {
      document.addEventListener('touchstart', preHandler, false)
      that.drawBegin(event)
    })
    this.canvas.addEventListener('touchend', function (event) {
      document.addEventListener('touchend', preHandler, false)
      that.drawEnd()
    })
    this.clear(btn)
  }
  drawBegin (e) {
    var that = this
    window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.cxt.strokeStyle = '#000'
    this.cxt.beginPath()
    this.cxt.moveTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    )
    this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
    canvas.addEventListener('touchmove', function () {
      that.drawing(event)
    })
  }
  drawing (e) {
    this.cxt.lineTo(
      e.changedTouches[0].clientX - this.stage_info.left,
      e.changedTouches[0].clientY - this.stage_info.top
    )
    this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
    this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
    this.cxt.stroke()
  }
  drawEnd () {
    document.removeEventListener('touchstart', preHandler, false)
    document.removeEventListener('touchend', preHandler, false)
    document.removeEventListener('touchmove', preHandler, false)
    // canvas.ontouchmove = canvas.ontouchend = null
  }
  clear (btn) {
    this.cxt.clearRect(0, 0, 355, 250)
    document.getElementById('img').src = ''
    document.getElementById('img').display = 'none'
  }
  save () {
    return canvas.toDataURL('image/png')
  }
}

export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      val: true,
      url: '',
      img: ''
    }
  },
  mounted () {
    draw = new Draw('canvas')
    draw.init()
    this.ca()
    document.body.style.backgroundColor = '#FAF9FE'
  },
  created () {
    document.title = '签名'
  },
  methods: {

    clear: function () {
      draw.clear()
      var id = this.$route.query.id
      if (id == 1) {
        var str = JSON.stringify({img: ''})
        localStorage.img = str
      } else {
        var str = JSON.stringify({img: ''})
        localStorage.img1 = str
      }
    },
    save: function () {
      var data = draw.save()
      var id = this.$route.query.id
	  console.log(data)
      if (id == 1) {
        var str = JSON.stringify({img: data})
        localStorage.img = str
      } else {
        var str = JSON.stringify({img: data})
        localStorage.img1 = str
      }
      this.$router.go(-1)
    },
    mutate (word) {
      this.$emit('input', word)
    },
    ca () {
      var id = this.$route.query.id
      var a = localStorage.img
      var b = localStorage.img1
      console.log(a)
      if (id == 1 && a !== undefined && a !== '{"img":""}') {
        this.img = JSON.parse(a).img
        document.getElementById('img').src = this.img
      } else {
        this.img = ''
      }
      if (id == 2 && b !== undefined && b !== '{"img":""}') {
        this.img = JSON.parse(b).img
        document.getElementById('img').src = this.img
      } else {
        this.img = ''
      }
    }
  }
}
</script>

    <style scoped>
        #img{
            width: 335px;
            height: 250px;
            /*margin-top: -10px;*/
        }
.sign-canvas{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
#canvas{
    border-radius: 10px;
    border: 1px solid #1da4f2;
}
.sign-btn {
            display: flex;
            margin:20px 0;
        }
        .sign-btn div {
            width: 175px;
            text-align: center;
            height: 70px;
            line-height: 70px;
            color: #FFFFFF;
        }
        .sign-btn div:active {
            background-color: #CCCCCC;
            color: #333333;
        }
        .sign-btn .clear {
            background-color: #FF8F58;
        }
        .sign-btn .save {
            background-color: #0599D7;
        }
.head{
    width: 100%;
    height: 44px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
    font-weight: bold;
    color: #fff;

}

.head_right{
    float: left;
    margin-top: 10px;
    position: relative;
}
.head_left img{
    width: 7px;
    height: 13px;
    float: left;
    margin: 0px 5px 0px 0px;
}
.div{
    float: left;
}
.save{
  width: 90%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
}
.save button{
    /*width: 49%;*/
    /*height: 44px;*/

    /*border-radius: 22px;*/
    /*text-align: center;*/
    /*line-height: 44px;*/
    /*margin-top: 160px;*/
    /*font-size: 15px;*/
    /*font-family: PingFang SC;*/
    /*font-weight: bold;*/
    /*color: #FFFFFF;*/
    /*!*position:fixed;*!*/
    /*bottom: 50px;*/
    /*left: 5%;*/
  width: 49%;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #1DA4F2;
  border-radius: 5px;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #1da4f2;

}
.backBlue{
  color: #FFFFFF !important;
  background: linear-gradient(90deg, #1DA3F2, #1DC7F2)!important;
}
h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } #canvas {  cursor: default; } #keyword-box { margin: 10px 0; }
* { touch-action: pan-y; }
.as{
  position: fixed;
  top: 54px;

}
</style>
